import React, { Component } from "react";
import './../taskmanage/Wofuzwderenwu.less'
import servies from "./../../servies";
import { Button, Form,  Select, Table, DatePicker, Space,Input } from "antd";
const { Option } = Select;
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const columns = [
  {
    title: "序号",
    dataIndex: "id",
    key: "id",
    width:70,
    align: "center",
  },
  { 
    title: "标题",
    dataIndex: "biaoti",
    key: "biaoti",
    width:100,
    align: "center",
  },
  {
    title: "付款类型",
    dataIndex: "fkleixing",
    width:100,
    key: "1",
    align: "center",
  },
  {
    title: "预付款时间",
    dataIndex: "yudate",
    width:120,
    key: "2",
    align: "center",
  },
  {
    title: "付款金额(万)",
    dataIndex: "fumoney",
    width:100,
    key: "3",
    align: "center",
  },
  {
    title: "所属项目",
    dataIndex: "ssxmu",
    width:120,
    key: "3",
    align: "center",
  },
  {
    title: "关联合同",
    dataIndex: "guanlian",
    width:100,
    key: "4",
    align: "center",
  },
  {
    title: "是否紧急",
    dataIndex: "jinji",
    width:90,
    key: "5",
    align: "center",
  },
  {
    title: "申请人",
    dataIndex: "shenuser",
    width:100,
    key: "6",
    align: "center",
  }, {
    title: "提交时间",
    dataIndex: "tijiaodate",
    width:145,
    key: "7",
    align: "center",
  }, 
  {
    title: "打款状态",
    dataIndex: "dakuanstate",
    width:80,
    key: "8",
    align: "center",
  },
  {
    title: "操作",
    key: "operation",
    width:100,
    fixed: "true",
    render: () => <span className="actions">查看详情</span>,
    align: "center",
  },
];

export default class Fukuanjilu extends Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.state = {
      id: "",
      biaoti: "",
      fkleixing: "",
      yudate: "",
      fumoney: "",
      ssxmu:"",
      guanlian:"",
      jinji:"",
      shenuser:"",
      tijiaodate: "",
      
      dakuanstate:"",
      data :[]
    };
  }
  romref = React.createRef();
  formRef = React.createRef();
  
  componentDidMount() {
    //发起请求
   servies.GetFukuanjilu().then((data)=>{
    console.log(data);
    this.setState({
      data:data
    })
   })
  }
  onReset = () => {
    this.formRef.current.resetFields();
  };
  onChange = (e) => {
    e.preventDefault()
    console.log("value", e.target.value);
    let key = e.target.dataset.key;
    this.setState({ [key]: e.target.value });
  };
  render() {
    return (
      <>
        <Form
          {...layout} ref={this.formRef} name="control-ref"  onFinish={this.onFinish} >
           <Form.Item name="shenuser" label="申请人">
            <Input/>
          </Form.Item>
          <Form.Item name="fkleixing" label="付款类型">
            <Select allowClear onChange={this.onGenderChange} defaultValue="male" >
              <Option value="male">全部</Option>
              <Option value="female">班组付款</Option>
              <Option value="cailiao">材料采购付款</Option>
              <Option value="hetong">项目合同收款</Option>
              <Option value="linshi">临时付款</Option>
              <Option value="renli">人力工资付款</Option>
            </Select>
          </Form.Item>
          <Form.Item name="jinji" label="是否紧急">
            <Select allowClear onChange={this.onGenderChange} defaultValue="male" >
              <Option value="male">全部</Option>
              <Option value="female">是</Option>
              <Option value="other">否</Option>
            </Select>
          </Form.Item>
          <Form.Item name="dakuanstate" label="打款状态">
            <Select allowClear onChange={this.onGenderChange} defaultValue="male" >
              <Option value="male">全部</Option>
              <Option value="female">已打款</Option>
              <Option value="other">未打款</Option>
            </Select>
          </Form.Item>
          <Form.Item name="yudate" label="付款时间">
            <Space direction="vertical">
              <DatePicker placeholder="" />
            </Space>
          </Form.Item>
          <Form.Item name="tijiaodate" label="提交时间">
            <Space direction="vertical">
              <DatePicker placeholder="" />
            </Space>
          </Form.Item>
        </Form>
         <div className="ant-btn-block">
            <Button type="primary" htmlType="submit">查询</Button>
            <Button htmlType="button" onClick={this.onReset}>重置</Button>
            </div>
      <Table columns={columns} dataSource={this.state.data} scroll={{x:1500,y:500}} />
      </>
    );
  }
}